<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
            height: 40px;
        }
        ul li{
            width: 100px;
            height: 40px;
            background-color: darkgrey;
            text-align: center;
            line-height: 40px;
            float: left;
        }
        #panels{
            position: relative;
        }
        #panels div{
            width: 600px;
            height: 400px;
            position: absolute;
            top: 0px;
        }
        .panel11{
            background-color: aquamarine;
        }
        .panel12{
              background-color: #ff4e37;
          }
        .panel13{
                background-color: #5162ff;
            }
        .panel14{
                  background-color: #5fff48;
              }
    </style>
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script>
    <script>
        $(function() {
            $("#panels div").hide();
            $(".panel11").show();
            $("#ul li").click(function () {
                var index = $(this).index();

                $("#panels div").eq(index).show().siblings().hide();
            });


        });
    </script>
</head>
<body>

</body>
    <ul id="ul">
        <li>导航</li>
        <li>推荐</li>
        <li>购物</li>
        <li>视频</li>
    </ul>
    <div id="panels">
        <div class="panel11"></div>
        <div class="panel12"></div>
        <div class="panel13"></div>
        <div class="panel14"></div>
    </div>
</html>